<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>创建对象的演化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    
    <script type="text/javascript">
        var obj = new Object();
        obj.name = "libai";
        obj.age = 24;

        // 给对象添加多个属性，写起来麻烦  进化为 字面量形式
        var obj = {
            name: "xx",
            age: "xx",
            sayName: function (){
                
            }
        }

        // 如果书写多个拥有相同属性不同属性值的对象，更改起来麻烦
        var user1 = {
            name: "asd",
            age: 12,
            sayName: function (){
                
            }
        }
        var user2 = {
            name: "xx",
            age: 34,
            sayName: function (){
                
            }
        }

        // 工厂模式：封装函数
        function createUser(name, age){
            return {
                name,
                age
            }
        }

        function createCat(name, age){
            return {
                name,
                age
            }
        }

        var xh = createUser("小红", 5);
        var xl = createCat("小蓝", 5);
        console.log(xh, xl);

        // 工厂模式：无法为创建的对象区分类型，--> 构造函数模式
        function User(name, age){
            this.name = name;
            this.age = age;
        }

        function Cat(name, age){
            this.name = name;
            this.age = age;
        }

        var Jhon = new User("Jhon", 4);
        var Tom = new Cat("Tom", 3);

        console.log(Jhon, Tom);

        // 构造函数模式内部所有属性都是实例的私有属性，没办法让实例共享一部分属性
        // 构造函数 + 原型 的组合方式
        // 构造函数内部通过this绑定的属性称为 实例属性（实例的私有属性），原型属性（共享属性）
        Cat.prototype.like = "eat fish";
        Cat.prototype.run = function (){
            console.log("running");
        };

        var Blue = new Cat("蓝", 5);

        console.log(Blue.like);
        Tom.run();
    </script>
</body>
</html>